"use client";
import style from "./styles/index.module.scss";
// import { useState } from "react";
export default function Nav() {
  // const [navItems, _] = useState([
  //   { id: 1, text: "首页", link: "/" },
  //   { id: 2, text: "产品", link: "/products" },
  //   { id: 3, text: "关于", link: "/about" },
  // ]);
  // const [loading, setLoading] = useState(true);
  const navItems = [
    { id: 1, text: "首页", link: "/" },
    { id: 2, text: "产品", link: "/products" },
    { id: 3, text: "关于", link: "/about" },
  ];
  // useEffect(() => {
  //   // 模拟API请求
  //   const fetchNavItems = async () => {
  //     // 替换为实际的API端点
  //     const timer = setTimeout(() => {
  //       // setNavItems([
  //       //   { id: 1, text: "首页", link: "/" },
  //       //   { id: 2, text: "产品", link: "/products" },
  //       // ]);
  //       navItems.push({ id: 3, text: "关于", link: "/about" });
  //       clearTimeout(timer);
  //       setLoading(false);
  //     }, 5000);
  //   };

  //   fetchNavItems();
  // }, []); // 空依赖数组确保只在组件挂载时执行一次

  // if (loading) {
  //   return <nav className={style.nav}>加载中...</nav>;
  // }

  return (
    <nav className={style.nav}>
      <ul className={style.navList}>
        {navItems.map((item) => (
          <li key={item.id}>
            <a href={item.link}>{item.text}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
}
